<template>
    <div>
        <van-notice-bar mode="closeable" wrapable :scrollable="false" v-if="loadSuccess && !shops.length">
            很抱歉，您还未绑定任何店铺，点击下方按钮立即绑定店铺，享受高端服务
        </van-notice-bar>
        <p style="font-size: 14px;text-indent: 16px;color: #aaa;margin: 0;padding: 0;line-height: 39px;">我的店铺</p>
        <van-sticky :offset-top="10">
            <div style="padding: 0 10px;">
                <van-button type="primary" color="linear-gradient(to right,#ff6034,#ee0a24)" block round @click="apply" size="small">添加店铺</van-button>
            </div>
        </van-sticky>
        <div class="container">
            <div v-for="item in shops">
                <div style="font-size: 14px;font-weight: bold;padding: 10px 10px 10px 16px;border-bottom: 1px solid #ebedf0">{{item.shop_name}}
                    <van-button size="mini" style="float: right;" round  @click="$router.push({ path: '/shop/bind', query: { shop: item }})">编辑</van-button>
                    <van-button size="mini" style="float: right;" round >活动设置</van-button>
                </div>
                <van-cell-group class="shop-cell">
                    <van-cell title="店铺类型" :value="item.type_name" />
                    <van-cell title="联系人" :value="item.contact_man" />
                    <van-cell title="联系电话" :value="item.contact_phone" />
                    <van-cell title="店铺区域" v-if="item.short_name" :value="item.short_name" />
                    <van-cell title="店铺地址" v-if="item.address" :value="item.address" />
                    <van-cell title="店铺平台" v-if="item.platform" :value="item.platform" />
                    <van-cell v-if="item.link_url" title="店铺链接">
                        <a :href="item.link_url.substr(item.link_url.indexOf('http'))">{{item.link_url}}</a>
                    </van-cell>
                </van-cell-group>
            </div>
        </div>
        <shop-tabbar-dialog :active="3" @navigate="navigate"></shop-tabbar-dialog>
        <phone-bind ref="phoneBind" @success="bindPhoneSuccess"></phone-bind>
    </div>
</template>

<script>
    import PhoneBind from "../Common/Dialog/PhoneBind";
    import ShopTabbarDialog from "../Common/Dialog/ShopTabbarDialog";
    export default {
        name: "ExploreShop",
        components:{
            PhoneBind,
            ShopTabbarDialog,
        },
        data(){
            return{
                loadSuccess:false,
                shops:[],
                verified_phone:false,
            }
        },
        mounted() {
            this.loadData();
        },
        methods:{
            navigate(page){
                this.$router.replace(page);
            },
            loadData(){
                this.post('/api/client/shop/store',{}).then(result=> {
                    if (result.code === 0) {
                        this.loadSuccess = true;
                        this.shops = result.data.info;
                        this.verified_phone = result.data.verified_phone;
                    }
                });
            },
            apply(){
                // 检查当前用户是否绑定了手机号
                if(!this.verified_phone){
                    this.$refs.phoneBind.init();
                    return;
                }
                this.$router.push('/shop/bind');
            },
            bindPhoneSuccess(){
                this.verified_phone = true;
                this.apply();
            },
        }
    }
</script>

<style scoped>
    .container>div{
        margin: 10px;
        border: 1px solid #eee;
        border-radius: 5px;
    }
    .shop-cell{
        border-radius:0 0 5px 5px;
        overflow: hidden;
    }
    .shop-cell .van-cell__title{
        flex: 0 0 60px;
    }
    .shop-cell .van-cell__value{
        flex: 1 1 auto;
    }
</style>